<template>
    <view>

        <view class="release_content acea-row row-column-around">
           <!-- <view class="">
                你大哥向前插队了<text style="color: #9069FF;">1</text>位
            </view> -->
            <view class="" v-if="drawing">
                    
                    <l-circle v-model:current="percent" :trailWidth="12" :strokeColor="'#9069FF'" :strokeWidth="12" :percent="percent">
                        <text>{{percentNum}}%</text>
                    </l-circle>
            </view>
             <view class="" v-if="peopleNum>0&&!drawing" style="color: #fff;">
                 前方排队 <text style="color: #9069FF;">{{peopleNum}}</text>人
             </view>
            
            <text>努力绘画中，请耐心等待一下~</text>
            <view class="">
                您还可以 <text @click="toHome" style="color: #9069FF;">返回主页</text>等待
            </view>
            <view class="acea-row ">
                <view class="chadui" @click="cd">我要插队</view>
                <view class="cancel" @click="cancel">取消任务</view>
            </view>
            <view class="" style="color: #fff;">
                剩余插队次数 <text style="color: #9069FF;">{{month_vip_speed_counts?month_vip_speed_counts:0}}</text>次
            </view>
        </view>
        <view class="bottom">
            <view class="acea-row  row-between">
                <text class="textDesc">您的描述词：</text>
                <view class=" acea-row row-center"  @click="copy">
                    点击复制 <image src="/static/images/copy.png" mode="widthFix"></image>
                </view>
            </view>
            <view class="" style="margin-top: 30rpx;">
                {{text?text:''}}
            </view>
        </view>

    </view>
</template>

<script>
    import {
        mapGetters
    } from "vuex";
    import {
        TOKENNAME,
        HTTP_REQUEST_URL
    } from '@/config/app.js';
    import {
        toLogin 
    } from '@/libs/login.js';
    import {
        AiStatus,
        AiWaitingEnd,
        cancelQueue,
        aiCounts,
        AiSpeed,reqQueue
    } from "@/api/ai";
    import {
        getUserInfo
    } from '@/api/user.js';
    import {
        setStorage,
        getStorage
    } from '../../../libs/uniApi.js';
    import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue';
    import {
        configMap
    } from '@/utils';
    import store from '@/store';
    
    export default {
        components: {
            
        },
        data() {
            return {
                desc: '',
                paramsStr: '',
                timer: null,
                timers:null,
                text:"",
                drawing:false,
                modelVale:0,
                target:50,
                percent:60,
                percentNum:0,
                peopleNum:0,
                month_vip_speed_counts:0,
                cate:"",
                cate1:"",
                stop:false
            };
        },
        computed: {
            ...mapGetters(['isLogin', ]),


        },
        watch: {},
        mounted() {

        },
        onUnload() {
            this.stop=true
        },
        onLoad(opt) {
            this.stop=false
            if (!this.isLogin) {

            } else {
                if(opt.text){
                    this.text = opt.text
                }
                if(opt.cate) this.cate = opt.cate
                if(opt.cate1) this.cate1 = opt.cate1
                if (opt.paramsStr) {
                    this.stop=false
                    this.paramsStr = opt.paramsStr
                    // this.getAiTask()
                    // this.aiAiWaitingEnd()
                    this.timer = setInterval(() => {
                        // this.getAiTask()
                    }, 1000)
                    this.getAiTask()
                }
                this.getCount()
            }
          

        },
        onShow(){
              
                  
              if(this.paramsStr){
                  this.getAiTask()
              }
        },
        methods: {
            toHome(){
               uni.setStorageSync('paramStr',this.paramsStr) 
              uni.switchTab({
                  url:'/pages/index/index'
              })  
            },
            async getCount(){
                aiCounts().then(res=>{
                    
                    this.month_vip_speed_counts = res.data.data.month_vip_speed_counts
                })
               
            },
            async aiAiWaitingEnd() {
                let vm = this

                let data = await AiWaitingEnd({
                    method: 'POST',
                    api: 'req_queue_size',
                    paramsStr: `prompt=${this.paramsStr}&negative_prompt=cat&material_category=&jewelry_category=&negative_prompt=cat&sampler_index=Euler a&seed=1&batch_size=2&n_iter=2&steps=20&width=514&height=514`
                })
                
                if (data.status == 200) {
                        
                    if (data.data.queue_size == 0) {
                        
                        
                      
                        this.drawing=true
                        this.percent= 0
                        // this.getAiTask(1)
                    }else{
                        this.peopleNum = data.data.queue_size
                        this.aiAiWaitingEnd()
                        
                    }
                  
                }

            },
            cancel(){
                let vm =this
                uni.showModal({
                    content:'确定要取消该任务吗?',
                    success:function(res){
                        if(res.confirm){
                                cancelQueue({
                                    method: 'POST',
                                    api: 'stop_task',
                                    paramsStr: `req_id=${vm.paramsStr}`
                                }).then(res=>{
                                        if(res.status=200){
                                            uni.removeStorageSync('paramStr')
                                            uni.showToast({
                                                title:'取消成功'
                                            })
                                            setTimeout(()=>{
                                                uni.navigateBack()
                                            },800)
                                        }else{
                                            uni.showToast({
                                                title:res.message,
                                                icon:"none"
                                            })
                                        }
                                        
                                })
                        }
                    }
                })
            },
            async getAiTask(type) {
                if(this.stop) return
                let data = await AiStatus({
                    method: 'POST',
                    api: 'progress',
                    paramsStr: `req_id=${this.paramsStr}`
                })
                
                if(data.data.data.length==0){
                    
                    
                    if( data.data.status=="processing"){
                        this.drawing=true
                        this.percent = (data.data.progress*100).toFixed(0)
                        this.percentNum = (data.data.progress*100).toFixed(0)
                        
                    }else if(data.data.status=="pending"){
                        
                        this.peopleNum = data.data.pending_count
                    }
                    this.getAiTask()
                    
                }else if(data.data.data.length>0){
                    clearInterval(this.timers)
                    this.timers=null
                    
                    this.getAiProgess()
                }
            
            
            },
            async getAiProgess() {
            
                uni.redirectTo({
                    url: '/pages/plantGrass/plant_result/index?paramsStr=' + this.paramsStr+"&cate="+this.cate+"&cate1="+this.cate1
                })
            },
            copy(){
                let vm =this
                uni.setClipboardData({
                    data:vm.text,
                    success:function(res){
                        uni.showToast({
                            title:'复制成功'
                        })
                        
                    }
                })
            },
            cd(){
                    let vm =this
                    AiSpeed({
                        method: 'POST',
                        api: 'jump_queue',
                        paramsStr:`req_id=${vm.paramsStr}`
                    }).then(res=>{
                            console.log(res)
                            if (res.status == 200) {
                                let msg = res.message=='success'? `插队成功，成功插队${res.data.jumpers}人`:res.message
                                uni.showToast({
                                    title:msg,
                                    icon:'none'
                                })
                                this.getCount()
                                this.getAiTask()
                            }
                    }).catch(err=>{
                        
                    })
            }
            
        },
      
    }
</script>

<style lang="scss" scoped>
    .release_content {
        padding: 36rpx;
        background-color: rgba(28, 28, 30, 1);
        margin: 20rpx 48rpx 60rpx;
        border-radius: 16rpx;
        height: 666rpx;
        align-items: center;
        font-size: 26rpx;
        color: #bbb;

        .chadui {
            width: 160rpx;
            height: 60rpx;
            line-height: 60rpx;
            border-radius: 8rpx;
            background-color: rgba(144, 105, 255, 1);
            color: rgba(229, 229, 229, 1);
            font-size: 28rpx;
            text-align: center;
            margin-right: 88rpx;
            font-family: Microsoft Yahei;
        }

        .cancel {
            width: 160rpx;
            height: 60rpx;
            line-height: 60rpx;
            border-radius: 8rpx;
            background-color: rgba(35, 36, 40, 1);
            color: rgba(187, 187, 187, 1);
            font-size: 28rpx;
            text-align: center;
            font-family: Microsoft Yahei;
            
        }

    }

    .bottom {
        margin: 60rpx 48rpx 0;
        min-height: 160rpx;
        padding: 20rpx;
        background-color: rgba(28, 28, 30, 1);
        border-radius: 16rpx;
        color: #9A9A9A;
        font-size: 24rpx;
        line-height: 30rpx;

        image {
            width: 30rpx;
            margin-left: 10rpx;
        }

        .textDesc {
            color: rgba(247, 247, 247, 1);
            font-size: 36rpx;
            line-height: 36rpx;
            font-family: PingFangSC-bold;
        }

    }
</style>